<template>
    <div class="body">
        <div class="top"><div class="title">举报题目</div></div>
        <div class="middle">
            <div class="title">问题类型</div>
            <div class="typeList">
                <div class="type" v-for="(type,index) in typeList" :key="index" @click="onType(index)" :class="{selectType:index == selectType }">{{type}}</div>
            </div>
        </div>
        <div class="bottom">
             <div class="title">详细情况</div>
             <div class="remark"><textarea maxlength="300" placeholder="我有意见" class="remarkText" v-model="remark" /></div>
             <div class="submitBtn" @click="onSubmit">提交</div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      //1:排版有问题,2:题目不严谨,3:有错别字,4:题目错误,5:题目缺乏价值,6:其他问题
      typeList: {
        1: "排版有问题",
        2: "题目不严谨",
        3: "有错别字",
        4: "题目错误",
        5: "题目缺乏价值",
        6: "其他问题"
      },
      remark: "",
      selectType: -1,
      id:0,
      qId:0,
    };
  },
  computed:{
    ...mapState(["gameRecord"]),
  },
  methods: {
    getId(){
      this.id = this.$root.$mp.query.current;
      if(this.gameRecord){
        this.qId = this.gameRecord.Result.subjectList[this.id].id;
        console.log(this.qId);
      }
    },
    onType(index) {
      this.selectType = index;
      console.log(this.selectType);
    },
    onSubmit() {
      this.fly
        .post("/feedBackSubject", {
          subjectId: this.qId,
          types: this.selectType,
          remark: this.remark
        })
        .then(res => {
          //输出请求数据
          wx.showToast({
            title: '提交成功',
            icon: 'success',
            duration: 1000
          })
          setTimeout(() => {
            this.$router.back();
          }, 1100);
        })
        .catch(err => {
          console.log(err.status, err.message);
        });
    }
  },
  onShow(){
    this.getId();
  },
};
</script>
<style lang="scss" scoped>
.body {
  //width: 100%;
  height: 100%;
  padding: 0 60rpx;
  box-sizing: border-box;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 60rpx;
    font-weight: bold;
    padding-top: 86rpx;
    padding-bottom: 52rpx;
  }
}
.middle {
  .title {
    color: #67c29f;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 24rpx;
  }
  .typeList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .type {
      width: 194rpx;
      height: 74rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx #ccc solid;
      //color: #ffffff;
      font-size: 26rpx;
      border-radius: 5rpx;
      margin-right: 24rpx;
      box-sizing: border-box;
      margin-bottom: 14rpx;
      &:nth-of-type(3n) {
        margin-right: 0rpx;
      }
    }
    .selectType {
      color: #ffffff;
      background-color: #67c29f;
    }
  }
}
.bottom {
  .title {
    color: #67c29f;
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 71rpx;
    margin-bottom: 25rpx;
  }
  .remark {
    display: flex;
    justify-content: flex-start;
    .remarkText {
      width: 100%;
      height: 227rpx;
      font-size: 30rpx;
      border: 5rpx solid #cccccc;
      box-shadow: 1rpx 1rpx 8rpx 8rpx rgba(#999, 0.1) inset;
      box-sizing: border-box;
      padding: 20rpx;
    }
  }
  .submitBtn {
    width: 100%;
    height: 110rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #67c29f;
    font-size: 40rpx;
    font-weight: bold;
    border-radius: 10rpx;
    margin-top: 84rpx;
  }
}
</style>


